import { Component } from 'vue-property-decorator';
import { VNode } from 'vue';
import { VueLifeCycleProcessing } from '../../decorators';
import { SortableLayoutBasicComponent } from '../../base-components';
import './design-area.less';

/**
 * 设计区
 *
 * @author chitanda
 * @date 2022-02-16 18:02:53
 * @export
 * @class DesignArea
 * @extends {Vue}
 */
@Component
@VueLifeCycleProcessing()
export class DesignArea extends SortableLayoutBasicComponent {
  render(): VNode {
    return (
      <div class='design-area'>
        <draggable {...this.vNodeData} class='design-area-draggable'>
          {this.children.map(data => {
            const provider = this.panel.getProvider(data.type);
            return this.$createElement(provider.contentComponent, {
              key: data.id,
              attrs: { id: data.id },
              props: { panel: this.panel, data },
            });
          })}
        </draggable>
      </div>
    );
  }
}
